<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-21 14:22
 * Desc: 我的
 */
-->
<template>
  <yy-page class="my" hasTab>
    <view class="my__content">
      <view class="my__header">
        <login-header :obj="userInfo"></login-header>
      </view>
      <view class="my__main mb100">
        <!-- #ifdef MP-WEIXIN || H5 -->
        <view class="my__main--header" v-if="[1, 2].includes(userInfo.memberLevel) || isShowMoney">
          <view>
            <template v-if="isLogin && [1, 2].includes(userInfo.memberLevel)">
              <span class="fs20 mr10">累计收益</span>
              <span>￥{{ userInfo.accumulatedEarnings || '--' }}</span>
            </template>
            <template v-if="isShowMoney && ![1, 2].includes(userInfo.memberLevel)">
              <span class="mr10" style="color: #f3cf89">自购省钱,</span>
              <span>分享赚钱</span>
            </template>
          </view>
          <view class="my__btn" @click="onNow">{{ [1, 2].includes(userInfo.memberLevel) ? '查看详情' : '立即体验' }}</view>
        </view>
        <!-- #endif -->
        <view class="my__main--navs mb20">
          <!-- #ifdef MP-WEIXIN || H5 -->
          <view class="my__money" @click="onShare" v-if="isShowMoney || [1, 2].includes(userInfo.memberLevel)">
            <view class="my__money--right">
              <view class="my__money--img"></view>
              <view>
                <p class="fs32 b"><span>邀请好友</span><span class="fc-warn">赚佣金</span></p>
                <p class="fs24 fc-warn">您已分享{{ userInfo.shareCount || '-' }}次, 经常分享可提高成交率</p>
              </view>
            </view>
            <view class="my__money--arrow"></view>
          </view>
          <!-- #endif -->
          <view v-if="$auth.memberSystemStatus() === '1'" class="my__card" @click="openMyCard">
            <view class="flex-1">
              <view class="fs32 b">会员卡</view>
              <view class="onShow fs22 mt10">已拥有影城会员卡，点此绑定，在线使用</view>
            </view>
            <view class="flex flex-col-bottom">
              <view class="card-num">{{ userInfo.cardNum }}</view>
              <view v-if="userInfo.cardNum" class="fs24">张</view>
            </view>
          </view>
          <u-cell :border="false" is-link @click="navTo('filmOrder')" center>
            <view slot="title">影票订单</view>
            <view
              slot="icon"
              class="my__icon"
              :style="{
                'background-image': 'url(https://public-oss-file.zmaxfilm.com/applet/img/my/icon-filmIcon.png)'
              }"
            ></view>
          </u-cell>
          <film-card v-if="orderInfo && orderInfo.orderId && orderInfo.autoTime !== '0'" :obj="orderInfo" @cutDown="getPendingOrder"></film-card>
          <view class="pr20 pl80">
            <u-line></u-line>
          </view>

          <view v-for="(item, index) in navItemsTop" :key="index">
            <u-cell is-link :border="false" @click="navTo(item.key)" center>
              <view slot="title">{{ item.name }}</view>
              <view
                slot="icon"
                class="my__icon"
                :style="{
                  'background-image': 'url(https://public-oss-file.zmaxfilm.com/applet/img/my/' + item.icon + '.png)'
                }"
              ></view>

              <view slot="value">
                <view class="fs26 fc8" v-if="item.more && isLogin">{{ userInfo.mallCouponNum }}张券可用</view>
              </view>
            </u-cell>

            <view v-if="item.more" class="fc-warn fs20 ml85 mb20">使用立减券购买券包，再购票，优惠双重叠加！</view>
            <view v-if="index < navItemsTop.length" class="pr20 pl80">
              <u-line></u-line>
            </view>
          </view>
        </view>
        <view class="my__main--navs my__main--navs-two">
          <template v-for="(item, index) in navItemsBottom">
            <u-cell is-link :border="false" :value="item.value ? item.value : item.key === 'kefu' ? getServiceTel() : ''" :key="item.key" @click="navTo(item.key)">
              <view slot="title">{{ item.name }}</view>
              <view
                slot="icon"
                class="my__icon"
                :style="{
                  'background-image': 'url(https://public-oss-file.zmaxfilm.com/applet/img/my/' + item.icon + '.png)'
                }"
              ></view>
            </u-cell>
            <view :key="index" v-if="index < navItemsBottom.length" class="pr20 pl80">
              <u-line></u-line>
            </view>
          </template>
        </view>
      </view>
      <newcomer v-model="showNewcomer" :list-data="couponList"></newcomer>
      <newcomer-register v-model="showNewcomerRegister" :image="activity.images"></newcomer-register>
      <!-- <view class="my__out-login">
        <u-button v-if="isLogin" @click="outLogin">退出登录</u-button>
      </view> -->
    </view>

    <invite-pop v-if="isShow" v-model="isShow" :obj="{ type: '', id: '' }"></invite-pop>
  </yy-page>
</template>

<script>
  import LoginHeader from './components/loginHeader/index.vue'
  import InvitePop from '@/pages/friends/components/InvitePop.vue'
  import { navItemsBottom, navItemsTop } from './const'
  import FilmCard from './components/FilmCard.vue'
  import { getIslogin, toGetUserInfo } from '@/utils/auth'
  import sharePage from '@/mixins/sharePage'
  import Newcomer from './components/Newcomer.vue'
  import NewcomerRegister from './components/NewcomerRegister.vue'
  import { locActivityPrize } from '@/utils/locStore/data'
  export default {
    name: 'mine',
    components: {
      LoginHeader,
      FilmCard,
      InvitePop,
      Newcomer,
      NewcomerRegister
    },
    mixins: [sharePage],
    data() {
      return {
        navItemsTop: this.$utils.deep(navItemsTop),
        navItemsBottom: navItemsBottom,
        mallSet: {},
        userInfo: {},
        activity: {},
        orderInfo: {},
        isShow: false,
        maxman: 0,
        maxorder: 0,
        showNewcomer: false,
        showNewcomerRegister: false,
        couponList: []
      }
    },
    onShow() {
      if (!this.getServiceTel()) {
        let doDeleta = false
        this.navItemsBottom.forEach((item) => {
          if (item.key === 'kefu') {
            doDeleta = true
          }
        })
        if (doDeleta) {
          this.navItemsBottom.pop()
        }
      }
      this.getMemberMission()
      if (this.isLogin) {
        this.init()
      }
      console.log('locActivityPrize.get()', locActivityPrize.get(), '===')
      if (locActivityPrize.get() && locActivityPrize.get().length > 0) {
        this.showNewcomer = true
        this.couponList = locActivityPrize.get()
        locActivityPrize.remove()
        console.log('locActivityPrize.remove()', locActivityPrize.get(), '===')
      }
    },
    onLoad() {
      if (!this.isLogin) {
        uni.$api.activity.getRegisterActivity().then((res) => {
          if (res && res.images) {
            this.activity = res
            console.log('this.activity', this.activity)
            this.showNewcomerRegister = true
          }
        })
      }
    },
    computed: {
      isLogin() {
        return getIslogin()
      },
      memberSystemStatus() {
        return this.$auth.memberSystemStatus()
      },
      isShowMoney() {
        return +this.maxman !== 0 || +this.maxorder !== 0
      }
    },
    methods: {
      init() {
        this.getUserInfo()
        this.getPendingOrder()
        this.getSet()
      },
      getSet() {
        uni.$api.orderFood.getSet({ cinemaId: this.$auth.getLocCinemaInfo().cinemaId }).then((res) => {
          this.mallSet = res
          this.navItemsTop = this.$utils.deep(navItemsTop)
          if (!res.open) {
            const index = this.navItemsTop.findIndex((i) => i.key === 'MallBuyOrder')
            if (index !== -1) {
              this.navItemsTop.splice(index, 1)
            }
          }
        })
      },
      getMemberMission() {
        uni.$api.user.getMemberMission().then((res) => {
          this.maxman = res.maxman
          this.maxorder = res.maxorder
        })
      },
      outLogin() {
        // handleLogout()
        // this.$auth.logout().then(() => {
        this.$auth.handleLogout()
        // })
      },
      getUserInfo() {
        toGetUserInfo(true).then((res) => {
          this.userInfo = JSON.parse(JSON.stringify(res))
        })
      },
      getPendingOrder() {
        uni.$api.orderFilm.getPendingOrder().then((res) => {
          this.orderInfo = res
        })
      },
      handelShow() {
        const sponsoredLinks = this.userInfo.sponsoredLinks
        if (!sponsoredLinks) {
          return
        }
        this.$tools.navigateTo(`/pages/webview/webview`, {
          url: sponsoredLinks,
          title: ''
        })
      },
      onNow() {
        if (this.isLogin) {
          if ([1, 2].includes(this.userInfo.memberLevel)) {
            this.handelShow()
          } else {
            this.$tools.navigateTo('/pages/friends/index')
          }
        } else {
          this.outLogin()
        }
      },
      onShare() {
        if (this.isLogin) {
          if ([1, 2].includes(this.userInfo.memberLevel)) {
            this.isShow = true
          } else {
            this.$tools.navigateTo('/pages/friends/index')
          }
        } else {
          this.outLogin()
        }
      },
      getServiceTel() {
        return this.$auth.getServiceTel()
      },
      openMyCard() {
        this.$tools.navigateTo('/pagesOrder/card/index')
      },
      navTo(key) {
        if (this.isLogin) {
          switch (key) {
            case 'filmOrder':
              this.$tools.navigateTo('/pagesOrder/order/filmList')
              break
            case 'storeOrder':
              this.$tools.navigateTo('/pagesOrder/order/goodsList')
              break
            case 'goodsCoupon':
              this.$tools.navigateTo('/pagesOrder/goodsCoupon/index')
              break
            case 'filmCoupon':
              this.$tools.navigateTo('/pagesOrder/filmCoupon/index')
              break
            case 'storeCoupon':
              this.$tools.navigateTo('/pagesOrder/merchantsCoupon/index')
              break
            case 'message':
              this.$tools.navigateTo('/subPages/message/index')
              break
            case 'setting':
              this.$tools.navigateTo('/subPages/userInfo/index')
              break
            case 'kefu':
              this.$tools.callTelephone(this.getServiceTel())

              break
            case 'MallBuyOrder':
              this.$tools.navigateTo('/pagesOrder/order/mallBuyList')
              break
            default:
              break
          }
        } else {
          this.outLogin()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my {
    &__header {
      box-sizing: border-box;
      padding-left: 48rpx;
      height: 400rpx;
      width: 100%;
      background: linear-gradient(to bottom, #48cbe9, #f3f5f7);
      /* #ifdef H5 */
      padding-top: 50rpx;
      height: 450rpx;
      /* #endif*/
    }
    &__main {
      margin-top: -223rpx;
      padding: 0 20rpx;
      &--header {
        box-sizing: border-box;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 34rpx;
        width: 670rpx;
        height: 108rpx;
        background: #333333;
        border-radius: 20rpx 20rpx 0 0;
        color: #fde9c3;
      }
      &--navs {
        box-sizing: border-box;
        padding: 26rpx 20rpx 0 20rpx;
        width: 710rpx;
        background: #ffffff;
        border-radius: 20rpx;
      }
      &--navs-two {
        padding-top: unset;
      }
    }
    &__btn {
      width: 144rpx;
      height: 60rpx;
      background: linear-gradient(90deg, #ffa633 0%, #f3cf89 0%, #ffeac2 100%);
      border-radius: 30rpx;
      color: #333333;
      font-size: 24rpx;
      font-weight: bold;
      line-height: 60rpx;
      text-align: center;
      letter-spacing: 1rpx;
    }
    &__card {
      padding: 0 20rpx 0 130rpx;
      color: #664630;
      margin-top: 20rpx;
      height: 143rpx;
      background: #fdf7d7;
      display: flex;
      align-items: center;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/card-bg.png) no-repeat;
      background-size: 100% 100%;
      .card-num {
        font-weight: bold;
        line-height: 60rpx;
        font-size: 60rpx;
        margin-right: 5rpx;
      }
    }
    &__money {
      box-sizing: border-box;
      padding: 20rpx 30rpx 20rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fdf7d7;
      border-radius: 20rpx;
      letter-spacing: 2rpx;
    }
    &__money--right {
      display: flex;
      align-items: center;
    }
    &__money--img {
      margin-right: 15rpx;
      width: 83rpx;
      height: 70rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/pic.png) no-repeat;
      background-size: 100% 100%;
    }
    &__money--arrow {
      width: 38rpx;
      height: 38rpx;
      background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/icon-arrow.png) no-repeat;
      background-size: 100% 100%;
    }
    &__icon {
      margin-right: 15rpx;
      width: 40rpx;
      height: 40rpx;
      // background: url(https://public-oss-file.zmaxfilm.com/applet/img/my/icon-filmIcon.png)
      //   no-repeat;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    &__out-login {
      position: fixed;
      bottom: 0;
      width: 100%;
    }
  }
</style>
